<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="未打印" name="2">
        <el-row type="flex" justify="space-around" class="c_top1">
          <el-col :span="10">
            <p>
              <span>未打印(份)</span>
              <span>实时数据</span>
            </p>
            <p style="line-height: 60px;height: 60px;padding-left: 20%;" v-if="flaskList.length">{{flaskLength}}</p>
            <p v-else style="line-height: 60px;height: 60px;padding-left: 20%;color:#aaa;font-size:20px">
              暂无未打印订单
            </p>
            <p>更新时间：<b style="font-size:16px">{{newDate}}</b></p>
          </el-col>
          <el-col :span="10">
            <p>
              <span>今日总订单(份)
                <el-tooltip class="item" effect="dark" content="未打印和已打印订单总数" placement="top-start">
                  <i class="iconfont icon-jieshi"></i>
                </el-tooltip>
              </span>
              <span>昨日:<b>2%<i class="iconfont icon-shangsheng"></i></b></span>
            </p>
            <p style="line-height: 60px;height: 60px;padding-left: 20%;">{{allorderLen}}</p>
            <p>更新时间：<b style="font-size:16px">{{newDate2}}</b></p>
          </el-col>

        </el-row>
        <el-table :data="flaskList" style="width: 92%;margin: 20px auto">
          <el-table-column prop="hash.ordernumber" label="订单号" sortable>
          </el-table-column>
          <el-table-column prop="hash.amount" label="金额" sortable>
          </el-table-column>
          <el-table-column prop="hash.number" label="数量" sortable>
          </el-table-column>
          <el-table-column prop="hash.remarks" label="备注">
          </el-table-column>
          <el-table-column prop="hash.paytime" label="付款时间" sortable>
          </el-table-column>
          <el-table-column
            label="操作"
            width="100"
          >
            <template slot-scope="scope">
              <el-button type="text" size="primary">打印</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="已打印" name="3">
        <el-row type="flex" justify="space-around" class="c_top1">
          <el-col :span="10">
            <p>
              <span>已打印(份)</span>
              <span>实时数据</span>
            </p>
            <p style="line-height: 60px;height: 60px;padding-left: 20%;" v-if="flaskList.length">{{flaskLength}}</p>
            <p v-else style="line-height: 60px;height: 60px;padding-left: 20%;color:#aaa;font-size:20px">
              暂无已打印订单
            </p>
            <p>更新时间：<b style="font-size:16px">{{newDate}}</b></p>
          </el-col>
          <el-col :span="10">
            <p>
              <span>今日总订单(份)
                <el-tooltip class="item" effect="dark" content="未打印和已打印订单总数" placement="top-start">
                  <i class="iconfont icon-jieshi"></i>
                </el-tooltip>
              </span>
              <span>昨日:<b>2%<i class="iconfont icon-shangsheng"></i></b></span>
            </p>
            <p style="line-height: 60px;height: 60px;padding-left: 20%;">{{allorderLen}}</p>
            <p>更新时间：<b style="font-size:16px">{{newDate2}}</b></p>
          </el-col>

        </el-row>
        <el-table :data="flaskList" style="width: 92%;margin: 20px auto">
          <el-table-column prop="hash.ordernumber" label="订单号" sortable>
          </el-table-column>
          <el-table-column prop="hash.amount" label="金额" sortable>
          </el-table-column>
          <el-table-column prop="hash.number" label="数量" sortable>
          </el-table-column>
          <el-table-column prop="hash.remarks" label="备注">
          </el-table-column>
          <el-table-column prop="hash.paytime" label="付款时间" sortable>
          </el-table-column>
          <el-table-column
            label="操作"
            width="100"
          >
            <template slot-scope="scope">
              <el-button type="text" size="primary">打印</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ts: this.newStore(),
      activeName: '2',
      flaskList: [],
      allorderList: [],
      flaskLength: '',
      allorderLen: '',
    };
  },
  created() {
    this.getAllorder();
    this.getOrderList(this.activeName);
    this.getnewDate();
  },
  methods: {
    handleClick(tab) {
      this.getOrderList(tab.name);
      this.getnewDate();
    },
    getOrderList(status) {
      const req = {
        handle: '47EEC3EB7CDCBB51AB6E160D70E901426F0648018EB06E9504A2567416DFCC6F14D6ED002B02A0EC',
        status,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.flaskList = ts.d.data.operation1;
        this.flaskLength = this.flaskList.length;
        for (let i = 0; i < this.flaskList.length; i += 1) {
          this.flaskList[i].hash.paytime = `${new Date(this.flaskList[i].hash.paytime * 1000).toLocaleDateString().replace(/\//g, '-')} ${new Date(this.flaskList[i].hash.paytime * 1000).toTimeString().substr(0, 8)}`;
        }
      });
    },
    getAllorder() {
      const req = {
        handle: '47EEC3EB7CDCBB51AB6E160D70E901426F0648018EB06E9504A2567416DFCC6F14D6ED002B02A0EC',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        console.log(ts.d.data.operation1);

        for (let i = 0; i < ts.d.data.operation1.length; i += 1) {
          if (ts.d.data.operation1[i].hash.status == '2' || '3') {
            this.allorderList.push(ts.d.data.operation1[i]);
          }
        }
        console.log(this.allorderList);

        this.allorderLen = this.allorderList.length;
      });
    },
    getnewDate() {
      const date = new Date();
      const year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      let H = date.getHours();
      let i = date.getMinutes();
      let s = date.getSeconds();
      if (H < 10) {
        H = `0${H}`;
      }
      if (i < 10) {
        i = `0${i}`;
      }
      if (s < 10) {
        s = `0${s}`;
      }
      if (month < 10) {
        month = `0${month}`;
      }
      if (day < 10) {
        day = `0${day}`;
      }
      this.newDate = `${year}-${month}-${day} ${H}:${i}:${s}`;
      this.newDate2 = `${year}-${month}-${day}`;
    },
  },
  computed: {
    unproSum() {
      let sum = 0;
      for (let i = 0; i < this.flaskList.length; i += 1) {
        sum += Number(this.flaskList[i].hash.num);
      }
      return sum;
    },
    proSum() {
      let sum = 0;
      for (let i = 0; i < this.flaskList.length; i += 1) {
        sum += Number(this.flaskList[i].hash.num);
      }
      return sum;
    },
  },
};
</script>

<style lang="stylus">
.num11
  display flex
  justify-content space-around
  span
    font-size 16px
    color rgb(102, 122, 123)
.num22
  display flex
  justify-content space-around
  span
    font-size 24px
.el-tabs__active-bar
  width 80px
.el-tabs__item
  text-align center
  width 80px
  height 50px
  line-height 50px
.el-tabs__header
  margin 0 auto
  width 92%
.el-col
  padding: 20px 10px;
.c_top1
  div
    background #fff
    margin 20px 0
    p
      height 30px
      line-height 30px
      margin-bottom 10px
      &:nth-child(1)
        color #aaa
        span
          &:first-child
            float left
          &:last-child
            float right
            color #26a2ff
            b
              color #409EFF
      &:nth-child(2)
        font-size 30px
        padding-left 25px
      &:last-child
        padding-top 10px
        border-top 1px solid #ccc
        color #aaa
        b
          color black
          float right
</style>
